import { defineComponent, onMounted, ref } from "vue";
import Page from "@/components/public/page/page";
import styles from "./homePage.module.less";
import { UserOutlined, } from "@ant-design/icons-vue";
import { $freeInsureNotice, $freeNoticePeople } from "@/api/free/free";
import { useStore as useMenuStore } from "@/store/menu";
import useXlsx from "@/hooks/useXlsx";
import { useStore as useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
import {
  $getGroup,
  $getBasicGroup,
} from "@/api/groupOrder/groupOrder";
export default defineComponent({
  name: "homePage",
  setup() {
    const router = useRouter();
    const peoplelist = ref([] as any);
    const xlsx = useXlsx();
    const title = ref("" as any);
    const menuStore = useMenuStore();
    const userStore = useUserStore();
    console.log(111111, menuStore.state.auths.includes("generalization"));
    const dowloadPeople = async (e: any) => {
      let name = "";
      if (e === 1) {
        name = "一个月内人员详情承保.xlsx";
      } else if (e === 2) {
        name = "二个月内人员详情承保.xlsx";
      } else {
        name = "三个月内人员详情承保.xlsx";
      }
      title.value = "正在导出文件...";
      xlsx.init({
        limit: 2000,
        otherParams: { type: e },
        service: $freeNoticePeople,
      });
      await xlsx.defineList([
        {
          label: "系统保单号",
          value: "order_no",
          width: 25,
        },
        {
          label: "保司保单号",
          value: "insurance_order_no",
          width: 25,
        },
        {
          label: "续保/新保",
          value: ["is_new", "label"],
          width: 25,
        },
        {
          label: "被保人姓名",
          value: "name",
          width: 25,
        },
        {
          label: "证件号码",
          value: "id_no",
          width: 25,
        },
        {
          label: "出生日期",
          value: "birthday",
          width: 25,
        },
        {
          label: "年龄",
          value: "age",
          width: 5,
        },
        {
          label: "性别",
          value: ["sex", "label"],
          width: 5,
        },
        {
          label: "手机号",
          value: "mobile",
          width: 20,
        },
        {
          label: "所在市",
          value: ["city_id", "label"],
          width: 20,
        },
        {
          label: "所在区",
          value: ["area_id", "label"],
          width: 20,
        },
        {
          label: "所在乡镇/街道",
          value: ["street_id", "label"],
          width: 25,
        },
        {
          label: "所在村/社区",
          value: ["village_id", "label"],
          width: 25,
        },
        {
          label: "商保/低保",
          value: ["people_type", "label"],
          width: 20,
        },
        {
          label: "本次生效日期",
          value: "people_start_date",
          width: 25,
        },
        {
          label: "承保时间",
          value: "insure_time",
          width: 25,
        },
        {
          label: "状态",
          value: ["order_status", "label"],
          width: 20,
        },
      ]);
      await xlsx.exportToExcel(name);
    };
    onMounted(() => {
      $freeInsureNotice().then((res: any) => {
        peoplelist.value = res.data;
        console.log(peoplelist.value[0].count);
      });
    });
    console.log(userStore?.channel_level,userStore.type);
    return () => (
      <Page>
        {
           userStore?.isSuperAdmin?(
            <div class={styles.home_page}>
                <div class={styles.home_page_box}></div>
            </div>
           ):(
            (menuStore.state.auths.includes("generalization") || menuStore.state.auths.includes("issue")) && (
               userStore?.channel_level > 2 || userStore?.type == 1
            )?(
              <div class={styles.homePage_body}>
              <div class={styles.left_box}>
                <div class={styles.top_box}>
                  <div class={styles.head_box}>
                    <div class={styles.head_title_box}>快捷操作</div>
                  </div>
                  <div class={styles.body_box}>
                    { menuStore.state.auths.includes("generalization") && (
                        <>
                          <div class={styles.body_left_box}>
                            <div class={styles.letf_icon_box}>
                              <UserOutlined />
                            </div>
                            <div class={styles.left_title_box} onClick={()=>{
                                 router.push("/groupOrderManagement/groupOrderEntryImportPage")
                            }}>录入团单</div>
                          </div>
                          <div class={styles.body_right_box}>
                            <div class={styles.right_icon_box}>
                              <UserOutlined />
                            </div>
                            <div class={styles.right_title_box} onClick={()=>{
                                 $getGroup({}).then((res: any) => {
                                  window.open(res.data.url);
                                });
                            }}>下载空白模版</div>
                          </div>
                        </>
                      )}
                      { menuStore.state.auths.includes("issue") && (
                          <>
                            <div class={styles.body_left_box}>
                              <div class={styles.letf_icon_box}>
                                <UserOutlined />
                              </div>
                              <div class={styles.left_title_box} onClick={()=>{
                                  router.push("/groupOrderManagement/insureExportSonPage")
                              }}>批量承保导出</div>
                            </div>
                            <div class={styles.body_right_box}>
                              <div class={styles.right_icon_box}>
                                <UserOutlined />
                              </div>
                              <div class={styles.right_title_box} onClick={()=>{
                                       $getBasicGroup({}).then((res: any) => {
                                        window.open(res.data.url);
                                      });
                              }}>下载低保模版</div>
                            </div>
                          </>
                      )}
                  </div>
                </div>
              </div>  
              <div class={styles.right_box}>
                <div class={styles.top_box}>
                  <div class={styles.head_box}>
                    <div class={styles.head_title_box}>待办内容</div>
                  </div>
                  <div class={styles.bottom_content_box}>
                    <div class={styles.one_box}>
                      <div class={styles.border_box}>
                        <span class={styles.fontColor_box}>提醒</span>
                        <span class={styles.fontColor_Two_box}>
                          {peoplelist.value[0]?.count}个
                        </span>
                        <span class={styles.content_box}>
                          被保人一个月内将需要进行续保
                        </span>
                        <span
                          class={styles.icon_box}
                          onClick={() => {
                            if (peoplelist.value[0]?.count > 0) {
                              dowloadPeople(peoplelist.value[0]?.type);
                            }
                          }}
                        >
                          下载清单
                        </span>
                      </div>
                    </div>
                    <div class={styles.two_box}>
                      <div class={styles.border_box}>
                        <span class={styles.fontColor_box}>提醒</span>
                        <span class={styles.fontColor_Two_box}>
                          {peoplelist.value[1]?.count}个
                        </span>
                        <span class={styles.content_box}>
                          被保人二个月内将需要进行续保
                        </span>
                        <span
                          class={styles.icon_box}
                          onClick={() => {
                            if (peoplelist.value[1]?.count > 0) {
                              dowloadPeople(peoplelist.value[1]?.type);
                            }
                          }}
                        >
                          下载清单
                        </span>
                      </div>
                    </div>
                    <div class={styles.three_box}>
                      <div class={styles.border_box}>
                        <span class={styles.fontColor_box}>提醒</span>
                        <span class={styles.fontColor_Two_box}>
                          {peoplelist.value[2]?.count}个
                        </span>
                        <span class={styles.content_box}>
                          被保人三个月内将需要进行续保
                        </span>
                        <span
                          class={styles.icon_box}
                          onClick={() => {
                            if (peoplelist.value[2]?.count > 0) {
                              dowloadPeople(peoplelist.value[2]?.type);
                            }
                          }}
                        >
                          下载清单
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            ):(<div class={styles.home_page}>
              <div class={styles.home_page_box}></div>
          </div>
          )
           )
        }
      </Page>
    );
  },
});
